<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三峡图书馆</title>
<script type="text/javascript" src="static/layui/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="static/layui-v2.5.3/layui/layui.js"></script>
<link rel="stylesheet" href="static/layui-v2.5.3/layui/css/layui.css">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
	$(function(){
		$("#body1").load("userbook/books");
		$('.carousel').carousel({
			  interval: 3000
		});
		$("#li").click(function(){
			$(this).css('background','#686868');
			$(this).css('color','white');
			$("#li1").css('background','');
			$("#li1").css('color','');
			$("#li2").css('background','');
			$("#li2").css('color','');
			$("#li3").css('background','');
			$("#li3").css('color','');
			$("#body1").load("userbook/books");
		});
		$("#li1").click(function(){
			$(this).css('background','#686868');
			$(this).css('color','white');
			$("#li").css('background','');
			$("#li").css('color','');
			$("#li2").css('background','');
			$("#li2").css('color','');
			$("#li3").css('background','');
			$("#li3").css('color','');
			$("#body1").load("userbook/borrow");
		});
		$("#li2").click(function(){
			$(this).css('background','#686868');
			$(this).css('color','white');
			$("#li1").css('background','');
			$("#li1").css('color','');
			$("#li").css('background','');
			$("#li").css('color','');
			$("#li3").css('background','');
			$("#li3").css('color','');
			$("#body1").load("userbook/message");
		});
		$("#li3").click(function(){
			$(this).css('background','#686868');
			$(this).css('color','white');
			$("#li1").css('background','');
			$("#li1").css('color','');
			$("#li").css('background','');
			$("#li").css('color','');
			$("#li2").css('background','');
			$("#li2").css('color','');
			$("#body1").load("userbook/changepwd");
		});
	});
	</script>	
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	background: url("static/images/1.jpg");
}

a {
	text-decoration: none;
}

#bs-navbar>ul>li:HOVER {
	color: white;
}

.li {
	color: black;
	font-size: 15px;
	line-height: 50px;
	margin-right: 20px;
	padding-right: 10px;
	padding-left: 10px;
	cursor: pointer;
}

#top {
	width:100%;
	background: #cdcdcd;
	opacity: 0.7;
	position: fixed;
}
#body1{
	
}
</style>
<body>
<header class="nav navbar-inverse" id="top" >
	<div class="container">
		<div class="navbar-header" style="margin-right: 50px;">
			<span class="navbar-brand" data-toggle="tab">
			<img alt="" src="static/images/book.png" width="35px"height="35px">
				 <font style="color:black;font-family: '黑体'"><b>三峡图书馆</b></font>
			</span>
		</div>   
		<nav class="collapse navbar-collapse" id="bs-navbar">
			<ul class="nav navbar-nav navbar-tabs">
				<li class="li" id="li" style="background:#686868;color: white"><i class="glyphicon glyphicon-heart"></i> 完美书刊</li>
				<li class="li" id="li1"><i class="glyphicon glyphicon-th-large"></i> 我的借书</li>
				<li class="li" id="li2"><i class="glyphicon glyphicon-user"></i> 个人信息</li>
			</ul> 
			
			<ul class="nav navbar-nav navbar-right">
				<li>
				 	<a style="color:black;" sec:authorize="!hasRole('ROLE_DVP')" sec:authentication="principal.name"></a>
				</li>
					<li  class="li"id="li3"><span class="glyphicon glyphicon-pencil"></span> 修改密码</li>
				<li>
					<a href="logout" style="color:black "><span class="glyphicon glyphicon-log-in"></span> 注销</a>
				</li>
			</ul>
		</nav>
	</div>
</header>
<div id="body1" style="padding: 20px;padding-top: 70px;">
	
</div>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
</body>  
</html>